<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    title="俱乐部会员协议">
    <Row class="mb30">
      <Col span="24">
        <!-- 如果启动编辑 -->
        <div v-if="canEdit">
          <VueUEditor ueditorPath='./static/ueditor-1.4.3.3/' @ready="editorReady" style="min-height: 300px"></VueUEditor>
        </div>
        <!-- 如果不启动编辑 -->
        <div v-show="!canEdit">
          <div
            v-if="!!form.data && !!form.data.protocol && form.data.protocol.length > 0"
            v-html="form.data.protocol"
            class="protocol-con">
          </div>
          <p v-else class="tc mt30 mb30">无内容，请编辑协议</p>
        </div>
      </Col>
    </Row>

    <div slot="footer">
      <span v-if="!canEdit">
        <Button class="mt10" @click="closeModal()">退出</Button>
        <Button type="primary" class="mt10" @click="enterEdit()">编辑协议</Button>
      </span>
      <span v-if="canEdit">
        <Button class="mt10" v-if="canEdit" @click="exitEdit()">返回</Button>
        <Button type="primary" class="mt10" v-if="canEdit" @click="submitForm()">保存</Button>
      </span>
    </div>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'
  import VueUEditor from 'vue-ueditor'
  import vipApi from '@/api/vip'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    components: {
      VueUEditor
    },
    watch: {
      'form.visible': 'onClose'
    },
    data () {
      return {
        canEdit: false,
        loading: true,
        vm: {
          protocol: ''
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    methods: {
      // 获取详情
      async detail () {
        const { body } = await vipApi.getProtocol({
          pkRcId: this.userInfo.pkRclubInfo,
          proType: 0
        })

        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          let protocol = body.responseData ? body.responseData.protocol : ''
          this.form.data = {
            pkRcId: this.userInfo.pkRclubInfo,
            proType: 0,
            protocol: protocol
          }
        } else {
          this.$Modal.error({
            title: '错误',
            content: body.desc,
            onOk: () => {}
          })
        }
      },
      // 渲染编辑框
      editorReady (editorInstance) {
        editorInstance.setContent(this.form.data.protocol || '')
        editorInstance.addListener('contentChange', () => {
          this.vm.protocol = editorInstance.getContent()
        })
      },
      // 进入编辑模式，复制协议内容，避免直接修改
      enterEdit () {
        this.vm.protocol = this.form.data.protocol || ''
        this.canEdit = true
      },
      exitEdit () {
        this.vm.protocol = ''
        this.canEdit = false
      },
      // 弹层关闭时时，重置
      onClose () {
        this.exitEdit()
      },
      closeModal () {
        this.form.visible = false
        this.exitEdit()
      },
      // 保存结果
      async submitForm () {
        this.form.data.protocol = this.vm.protocol
        if (this.form.data.protocol === '') {
          this.$Message.error('请输入协议内容')
          return
        }
        const { body } = await vipApi.updateProtocol(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('提交成功')
          this.exitEdit()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    async mounted () {
      await this.$store.dispatch('getUserInfo')
      this.detail()
    }
  }
</script>

<style lang="less">
  .protocol-con {
    p {
      text-indent: 2em;
      font-size: 14px;
      white-space: normal;
      word-break: break-all;
    }
  }
</style>
